<template>
  <div class="action">
    <template v-for="btn in btnList">
      <el-popover
          :key="btn.id"
          placement="bottom"
          v-if="btn.id==='user'"
          popper-class="close-popover"
          trigger="click">
        <div class="btn" @click="logout">
          退出账户
        </div>
        <div slot="reference" class="btn " style="margin-left:1.25rem" :key="btn.id" @click="handelActionClick(btn.id)">
          <img :src="btn.icon">
        </div>
      </el-popover>
      <div class="btn" :key="btn.id" v-else-if="btn.isShow" style="margin-left:1.25rem"
           @click="handelActionClick(btn.id)">
        <img :src="btn.icon">
      </div>
    </template>
  </div>
</template>

<script>
import icon1 from '@/assets/image/headerAction/icon1.png'
import icon2 from '@/assets/image/headerAction/icon2.png'
import icon3 from '@/assets/image/headerAction/icon3.png'
import icon4 from '@/assets/image/headerAction/icon4.png'
import icon5 from '@/assets/image/headerAction/icon5.png'
import icon6 from '@/assets/image/headerAction/icon6.png'
import icon7 from '@/assets/image/headerAction/icon7.png'
import {closeWindow, minWindow} from "@/utils/brower";

export default {
  data() {
    return {
      btnList: [
        {
          id: "switch-page",
          title: "切换页面",
          icon: icon1,
          isShow: true,
        },
        {
          id: "min-screen",
          title: "最小化",
          icon: icon2,
          isShow: true,
        },
        {
          id: "full-screen",
          title: "全屏",
          icon: icon3,
          isShow: true,
        },
        {
          id: "recovery-screen",
          title: "还原屏幕",
          icon: icon7,
          isShow: false,
        },
        {
          id: "set",
          title: "设置",
          icon: icon4,
          isShow: true,
        },
        {
          id: "user",
          title: "用户",
          icon: icon5,
          isShow: true,
        },
        {
          id: "close",
          title: "退出",
          icon: icon6,
          isShow: true,
        },
      ],
    };
  },

  created() {
    if ('/choosePath' === this.$route.path) {
      this.btnList = [
        {
          id: "min-screen",
          title: "最小化",
          icon: icon2,
          isShow: true,
        },
        {
          id: "close",
          title: "退出",
          icon: icon6,
          isShow: true,
        }]
    }
  },
  props: ["isShowSet"],
  mounted() {
    window.onresize = () => {
      let isFull = !!(document.webkitIsFullScreen || document.mozFullScreen ||
          document.msFullscreenElement || document.fullscreenElement
      );
      if (isFull) {
        this.btnList[2].isShow = false;
        this.btnList[3].isShow = true;
      } else {
        this.btnList[2].isShow = true;
        this.btnList[3].isShow = false;
      }
    }
  },
  methods: {
    handelActionClick(btnId) {
      switch (btnId) {
        case "full-screen":
          this.fullScreen();
          this.btnList[2].isShow = false;
          this.btnList[3].isShow = true;
          break;
        case "recovery-screen":
          this.exitFullscreen();
          this.btnList[2].isShow = true;
          this.btnList[3].isShow = false;
          break;
        case "set":
          if (this.isShowSet) {
            this.$emit('func', false)
          } else {
            this.$emit('func', true)
          }
          break;
        case 'switch-page':
          this.choosePath()
          break;
        case 'min-screen':
          minWindow()
          break;
        case 'close':
          closeWindow()
          break;
      }
    },
    //全屏
    fullScreen() {
      let element = document.querySelector("#app");
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      }
    },
    //退出全屏
    exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.mozCancelFullScreen) {
        document.mozCancelFullScreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    },
    choosePath() {
      this.$router.push('/choosePath')
    },
    logout() {
      sessionStorage.clear()
      this.$router.push('/login')
    }
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/style/base";

.action {
  display: flex;

  .btn {
    //background: $color-alpha-white-32;
    //border-radius: 4px;
    height: 3rem;
    cursor: pointer;
    //padding: $spacing-mini-er;

    .iconfont {
      font-size: 1.6rem;
    }

    img {
      width: 1.8rem;
    }

    //&:hover {
    //  background: $color-alpha-white-64;
    //  transition: all $transition-timing-function $transition-duration-12;
    //}

    & + .btn {
      margin-left: $spacing-base;
    }
  }
}
</style>
